<template>
  <!-- 修改密码 -->
  <div class="changePassword">
    <img class="back" src="@/assets/img/icons/black/back.svg" @click="$router.back()" />
    <div class="title">重新请设置密码</div>
    <div class="tip">
      <span>8-20个字符，不可以是纯数字</span>
      <span style="color: var(--primary)" @click="$router.push('/foundPassword')">忘记密码？</span>
    </div>
    <k-scroll
      class="scroll"
      topColor="var(--main-background-color)"
      bottomColor="var(--main-background-color)"
      topType="stretch"
      bottomType="stretch"
    >
      <div class="content">
        <div class="input-box">
          <input class="input" v-model="password_old" type="password" placeholder="请输入原始密码" />
          <img v-show="password_old" class="clear" src="@/assets/img/icons/clear.svg" @click="password_old = ''" />
        </div>
        <div class="input-box">
          <input class="input" v-model="password_one" type="password" placeholder="请输入新密码" />
          <img v-show="password_one" class="clear" src="@/assets/img/icons/clear.svg" @click="password_one = ''" />
        </div>
        <div class="input-box">
          <input class="input" v-model="password_two" type="password" placeholder="请确认新密码" />
          <img v-show="password_two" class="clear" src="@/assets/img/icons/clear.svg" @click="password_two = ''" />
        </div>
        <k-button
          class="complete"
          :disable="password_old.length < 8 || password_one.length < 8 || password_two.length < 8 || password_one != password_two"
          :bgColor="
            password_old.length >= 8 && password_one.length >= 8 && password_two.length >= 8 && password_one == password_two ? 'primary' : '#DFDFDF'
          "
          fontColor="#FFFFFF"
          fontSize="0.16rem"
          radius="0.03rem"
          @click="btnClick"
          >完成
        </k-button>
      </div>
    </k-scroll>
  </div>
</template>

<script>
export default {
  name: 'changePassword',
  data() {
    return {
      password_old: '', //用户输入原始密码
      password_one: '', //用户输入第一次密码
      password_two: '', //用户输入第二次密码
    }
  },
  methods: {
    //完成设置密码
    btnClick() {
      //设置密码
      this.$network
        .main('setPassword', this.password_one, this.password_old)
        .then((data) => {
          this.$toast({
            type: 'success',
            message: '修改成功',
          })
          this.$updateUserInfo() //更新用户信息
          this.$router.back() //返回
        })
        .catch((err) => {
          this.$toast({
            type: 'fail',
            message: err,
          })
        })
    },
  },
}
</script>

<style scoped src="./index.css"></style>
